<?
        require_once('../inc/facebook.php');
        $facebook = new Facebook(array(
                'appId' => '505291596168386',
                'secret' => '1bfdfd4c572056caed763a9c9fdf9d08'
        ));
       
        $fbUser = $facebook->getUser();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Page</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="../inc/bootstrap.css">
    <style type="text/css" >
        .error { color: red; }
                input.error { border-color: red; }
                .item {
                        width: 150px;
                        float: left;
                        margin: 5px;
                }
                .cart {
                        clear: both;
                        float: right;
                }
                .cart img {
                        width: 20px;
                }
                .img-wrapper{
                        height: 150px;
                }
        </style>
</head>

<body>
<? include('../inc/header.php'); ?>
        <div class="container">
                        <? include('../inc/nav.php'); ?>
                        <? if($fbUser): ?>
                                <img src="http://graph.facebook.com/<?=$fbUser?>/picture" />
                                <a href="<?=$facebook->getLogoutUrl()?>">Log Out</a>
                        <? else: ?>
                                <a href="<?=$facebook->getLoginUrl(array('scope' => 'read_stream, friends_likes'))?>">
                                        Log in with Facebook
                                </a>
                        <? endif; ?>
                        
            <div id="contents">           
            </div>
       </div>
       
    <script id="cart_template" type="text/x-handlebars-template">
          <ul class="unstyled cart">
          {{#each items}}
                {{> t_cart_item}}
          {{/each}}            
          </ul>
        </script>
        <script id="cart_item_partial_template" type="text/x-handlebars-template">
          <li id="cart_item_{{id}}">
                <img src="../Static/img/products/{{id}}.png"/>
            {{id}}
                <input type="number" name="quantity" value="{{count}}" />
          </li>
        </script>
        <script id="products_template" type="text/x-handlebars-template">
          {{#each aaData}}
                <div class="item">
                        <div class="img-wrapper">
                                <img src="../Static/img/products/{{id}}.png" />                        
                        </div>
                        <h6>
                                {{product_name}}
                                <span class="badge badge-important">{{quantity}}</span>
                        </h6>
                        <h5>Price: ${{price}}</h5>
                        <a class="add-to-cart-link" href="../Api/Cart.php?id={{id}}">
                                <img src="../Static/img/btn_add_to_cart.png" />
                        </a>
                        
                </div>   
          {{/each}}
        </script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
		</script>
        <script type="text/javascript">
                $(function(){
                        var t_cart = Handlebars.compile($("#cart_template").html());
                        var t_cart_item = Handlebars.compile($("#cart_item_partial_template").html());
                        var t_products = Handlebars.compile($("#products_template").html());
                        Handlebars.registerPartial('t_cart_item', t_cart_item);
                       
                       
                        $.get('../Api/Products.php', function(data){
                                                $("#contents").html(t_products(data));
                        },'json');
                       
                        $.get('../Api/Cart.php', function(data){
                                    var values = $.map( data, function( value, index ) {
                                      return value;
                                    });
                                        $("#contents").before(t_cart({items: values}));                
                        },'json');
                       
                        $(".add-to-cart-link").live('click',function(){
                                $.post(this.href, {_method: 'POST', count: 1}, function(data){
                                        if($("#cart_item_" + data.id).length > 0)
                                                        $("#cart_item_" + data.id).replaceWith(t_cart_item(data));
                                        else
                                                        $(".cart").append(t_cart_item(data));
                                },'json');
                                return false;
                        });
                })
        </script>
       
</body>
</html>


